<script setup>
import { postAddComment } from '@/axios/api/posts'
import { ElMessage } from 'element-plus'
import deleteIcon from '../imgs/deleteBtn.svg'
import selectImg from '../imgs/selectImage.svg'
import { usePostDetailStore } from '../postDetailStore'
import LfImageUpload from '@/components/commonUI/LfImageUpload.vue'
const props = defineProps({
  postId: Number,
  commentData: Array,
})

const postDetailStore = usePostDetailStore()

const emojiInputRef = ref(null)

const uploadRef = ref(null)

const commentImg = ref(undefined)
const content = ref(undefined)

const previewImgs = ref([]) //预览图片Base64数组
const uploadImgs = ref([]) //上传图片FormData数组

const isLoading = ref(false)

const emit = defineEmits(['refresh'])

const addComment = (resImgs) => {
  if (isLoading.value) return

  if (!content.value) {
    ElMessage.error('请输入评论内容')
    return
  }

  isLoading.value = true

  console.log(resImgs)

  postAddComment({
    pid: postDetailStore.toId,
    postId: props.postId,
    content: content.value,
    commentImg: resImgs[0],
    toUid: postDetailStore.toUid,
  })
    .then((res) => {
      // 重新获取评论列表
      // refetchCommentList()
      // if (toRemainPid.value) {
      //   refetchRemainComment()
      // }
      // 清空输入框
      content.value = ''

      isLoading.value = false
      // window.location.reload()
      emit('refresh')
    })
    .catch((err) => {
      isLoading.value = false
    })
}

const handleUpload = () => {
  const fileInput = document.getElementById('commentImgUpload')
  fileInput.click()
}

const readAndUploadFile = (event) => {
  const files = event.target.files

  Array.from(files).forEach((file) => {
    uploadImgs.value.push(file)

    const reader = new FileReader()

    // 监听文件读取完成事件
    reader.onload = function (event) {
      previewImgs.value.push(event.target.result) // 添加到预览数组
    }

    // 读取文件为Base64字符串
    reader.readAsDataURL(file)
  })
}

//todo 跟发帖上传图片重复，抽离到公共方法
const uploadImg = () => {
  uploadRef.value.uploadImg(addComment)
  // const formData = new FormData()

  // uploadImgs.value.forEach((file) => {
  //   formData.append('Image', file)
  // })

  // commentImg.value = formData
}

const deletePreviewImg = (index) => {
  uploadRef.value.deletePreviewImg(index)
}

const handleUploadClick = () => {
  uploadRef.value.handleUpload()
}
</script>

<template>
  <div class="bg-[--surface-0] flex-shrink-0 pb-3 sticky bottom-0">
    <div class="w-full flex justify-end items-end gap-3 pr-4">
      <div style="width: calc(100% - 80px)" class="rounded-md bg-[#dde4ed] pl-3">
        <!-- 上传图片预览 -->
        <div v-if="uploadRef?.previewImgs.length > 0" class="mb-2 flex gap-2 pt-4">
          <div v-for="(item, index) in uploadRef.previewImgs" class="relative w-fit" :key="index">
            <button @click="deletePreviewImg(index)" class="absolute top-1 right-1 w-4 h-4 opacity-50">
              <img :src="deleteIcon" alt="" />
            </button>
            <img class="w-16 h-16 rounded-sm object-cover" :src="item" alt="" />
          </div>
        </div>

        <div class="flex items-center">
          <input
            type="text"
            class="h-10 bg-[#dde4ed]"
            style="width: calc(100% - 30px)"
            :placeholder="postDetailStore.toUserName"
            v-model="content" />
          <!-- 上传图片 -->
          <LfImageUpload ref="uploadRef" customPreviewImg :maxCount="1">
            <button @click="handleUploadClick">
              <img class="w-5" :src="selectImg" alt="" />
            </button>
          </LfImageUpload>
        </div>
      </div>

      <button @click="uploadImg" class="h-10 w-14 bg-[#2e5592] rounded-md text-[#fff]">
        <div v-if="isLoading" class="flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-loader-circle-icon w-6 h-6 animate-spin">
            <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
          </svg>
        </div>
        <div v-else>发送</div>
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
